<template>
    <div>
      <el-table :data="tableData" stripe border>
        <el-table-column align="center" prop="BillNO" label="单据编号" show-overflow-tooltip />
        <el-table-column align="center" prop="BillDate" label="单据日期" show-overflow-tooltip />
        <el-table-column align="center" prop="db" label="工单类型" show-overflow-tooltip />
        <el-table-column align="center" prop="Quantity" label="出库数量" show-overflow-tooltip />
        <el-table-column align="center" prop="ShortName" label="仓库" show-overflow-tooltip />
        <el-table-column align="center" prop="FullName" label="客户" show-overflow-tooltip />
        <el-table-column align="center" prop="ItemRemark" label="备注" show-overflow-tooltip />
      </el-table>
  
      <el-pagination
        class="ps_pagination"
        v-model:current-page="page.pageCurrent"
        background
        layout="prev, pager, next,total"
        :total="page.total"
        v-model:page-size="page.pageSize"
      />
    </div>
  </template>
  
  <script setup>
  import { ref,  watch, watchEffect } from 'vue'
  
  const page = ref({ pageSize: 10, pageCurrent: 1, total: 0 })
  
  const tableData = ref([])
  const allData = ref([])
  
  const props = defineProps({
    data: {
      type: Array
    }
  })
  
  
  const updataTableData = () => {
    tableData.value = allData.value.slice(
      (page.value.pageCurrent - 1) * page.value.pageSize,
      page.value.pageSize * page.value.pageCurrent
    )
  }
  
  
  watchEffect(() => {
    allData.value = props.data
    page.value.total = props.data.length
    updataTableData()
  })
  
  
  watch(
    () => page.value.pageCurrent,
    () => {
      updataTableData()
    }
  )
  </script>
  
  <style scoped lang="scss"></style>
  